﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery.js"></script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>
    <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b" th:text="${username}"></span> , 欢迎你！</p>
        <a href="/logout">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li><a href="/billList">账单管理</a></li>
                <li><a href="/providerList">供应商管理</a></li>
                <li><a href="/userList">用户管理</a></li>
                <li id="active"><a href="/password">密码修改</a></li>
                <li><a href="/logout">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>密码修改页面</span>
        </div>
        <div class="providerAdd">

            <form action="/updatePassWord">
                <div th:switch="${value!= '1'}">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    &nbsp;<span></span>
                    <span th:case="true" style="color: red" th:text="${updateError}"></span>
                    <span th:case="false" style="color: red" th:text="${error}"></span>
                </div>
                <div>
                    <label>用户名：</label>
                    <input type="text" name="username" th:value="${username}" readonly/>
                </div>
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div class="">
                    <label for="oldPassword">旧密码：</label>
                    <!--                    //绑定一个光标离开的事件（onblur） 当光标离开之后会触发该事件-->
                    <!--                    //为该事件写一个触发脚本（test()） 该脚本携带一个参数：this-->
                    <!--                    //参数的this意义：表示参数就是这个输入框本身（拿到这个输入框本身 当作参数）-->
                    <input type="password" name="password" id="oldPassword" onblur="oldPassWord(this)" required/>
                    <span>*请输入原密码</span>
                    <span id="error" style="color: red"></span>
                </div>
                <div>
                    <label for="newPassword">新密码：</label>
                    <input type="password" name="newPassword" id="newPassword" onblur="newPassWord(this)" required/>
                    <span>*请输入新密码</span>
                </div>
                <div>
                    <label for="reNewPassword">确认新密码：</label>
                    <input type="password" name="reNewPassword" id="reNewPassword" onblur="reNewPassWord(this)"
                           required/>
                    <span>*请输入新确认密码，保证和新密码一致</span>
                    <span id="reError" style="color: red"></span>
                </div>
                <div class="providerAddBtn">
                    <!--<a href="#">保存</a>-->
                    <input type="submit" value="保存"/>
                </div>
            </form>
        </div>
    </div>
</section>
<footer class="footer">
</footer>
<script src="../../../static/js/time.js"></script>


<!--//定义脚本-->
<script type="text/javascript">

    //编写脚本
    //s 的意义：
    //s代表形参  在上面定义了test(this) 这里this代表实参 形参接受上面实参传过来的参数 也就是说：this=s
    function oldPassWord(s) {
        //console.log(s.value)
        //利用Ajax进行操作  （无需刷新页面便可向服务器传输或读写数据） 这里应该属于异步操作
        $.ajax({
            //向服务器传递的请求地址
            url: "/checkOldPassword",
            //传递的内容（该内容必须是Jason格式（键值对格式））
            data: {"oldPassWord": s.value},
            //向服务器传递请求的类型
            type: "get",
            //服务器的请求结束后 重新回到脚本进行操作 并且携带了一个参数（该参数是从服务器请求中返回的）：message
            success: function (message) {
                // var message=message;
                //判断参数是否为空
                if (message) {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#error").text(message)
                    //利用id绑定输入框 使得光标无法离开只能停留在输入框中
                    $("#oldPassword").focus()
                } else {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#error").text(" ")
                }
            }
        })
    }


    function newPassWord(s) {
        // console.log(s.value)
        $.ajax({
            //向服务器传递的请求地址
            url: "/getNewPassword",
            //传递的内容（该内容必须是Jason格式（键值对格式））
            data: {"newPassword": s.value},
            //向服务器传递请求的类型
            type: "get"
        })


    }


    function reNewPassWord(s) {
        // console.log(s.value)

        $.ajax({
            //向服务器传递的请求地址
            url: "/checkReNewPassword",
            //传递的内容（该内容必须是Jason格式（键值对格式））
            data: {"reNewPassword": s.value},
            //向服务器传递请求的类型
            type: "get",
            //服务器的请求结束后 重新回到脚本进行操作 并且携带了一个参数（该参数是从服务器请求中返回的）：message
            success: function (message) {
                // var message=message;
                //判断参数是否为空
                if (message) {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#reError").text(message)
                    //利用id绑定输入框 使得光标无法离开只能停留在输入框中
                    $("#reNewPassword").focus()
                } else {
                    // console.log(message)
                    //利用id绑定一个span元素 对其进行赋值
                    $("#reError").text(" ")
                }
            }
        })


    }


</script>

</body>
</html>